<template>
  <view class="wrapper">
    <!-- 商品图片 -->
    <swiper class="pics" autoplay indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#fff">
      <swiper-item v-for="item in goodsDetail.pics" :key="item.pics_id">
        <image :src="item.pics_big_url"></image>
      </swiper-item>
    </swiper>
    <!-- 基本信息 -->
    <view class="meta">
      <view class="price">￥{{goodsDetail.goods_price}}</view>
      <view class="name">{{goodsDetail.goods_name}}</view>
      <view class="shipment">快递: 免运费</view>
      <text class="collect icon-star">收藏</text>
    </view>
    <!-- 商品详情 -->
    <view class="detail">
		<!-- 小程序自带的富文本解析标签应用 -->
      <!-- <rich-text :nodes="goodsDetail.goods_introduce"></rich-text> -->
	  <!-- vue中的v-html解析富文本 -->
	  <view v-html="goodsDetail.goods_introduce"></view>
    </view>
    <!-- 操作 -->
    <view class="action">
      <button open-type="contact" class="icon-handset">联系客服</button>
      <text class="cart icon-cart" @click="goCart">购物车({{goodsCount}})</text>
      <text class="add" @click="addToCart">加入购物车</text>
      <text class="buy" @click="createOrder">立即购买</text>
    </view>
	<!-- <van-button>van按钮</van-button> -->
  </view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {getGoodsDetail} from '../../../api/index.js'
  export default {
	  data(){
		  return {
			  goodsId:'',
			  goodsDetail:{}
		  }
	  },
	onLoad(params) {
		// console.log(params)
		this.goodsId=params.id,
		this.fetchGoodsDetail()
	},
	computed:{
		...mapGetters('cart',['goodsCount'])
	},
    methods: {
      goCart() {
        uni.switchTab({
          url: '/pages/cart/index'
        })
      },
      createOrder() {
        uni.navigateTo({
          url: '/subpkg/pages/order/index'
        })
      },
	  async fetchGoodsDetail(){
		  const {data} = await getGoodsDetail({goods_id:this.goodsId})
		  if(data.meta.status!==200){
			  return uni.showToast({
			  	title:'数据请求失败',
				icon:'none'
			  })
		  }
		  // console.log(data)
		  this.goodsDetail=data.message
	  },
	  // 加入购物车
	  addToCart(){
		   const goods = {
		          goods_id: this.goodsDetail.goods_id, // 商品id
		          goods_name: this.goodsDetail.goods_name, // 商品名称
		          goods_price: this.goodsDetail.goods_price, // 商品价格
		          goods_small_logo: this.goodsDetail.goods_small_logo, // 商品图片
		          goods_number: 1, // 购买数量
		          goods_state: true // 商品选中状态
		    }
			this.$store.commit('cart/saveGoods',goods)
	  }
    }
  }
</script>

<style scoped lang="scss">
  .wrapper {
    margin-bottom: 100rpx;
    background-color: #f4f4f4;
  }

  .pics {
    height: 640rpx;
  }

  .meta {
    height: 250rpx;
    line-height: 1;
    padding: 30rpx 180rpx 30rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;

    .price {
      font-size: 36rpx;
      color: #ea4451;
      margin-bottom: 20rpx;
    }

    .name {
      color: #333;
      line-height: 1.4;
      font-size: 33rpx;

      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .shipment {
      font-size: 27rpx;
      color: #999;
      position: absolute;
      bottom: 30rpx;
    }

    .collect {
      width: 140rpx;
      height: 88rpx;
      text-align: center;
      box-sizing: border-box;
      border-left: 1rpx solid #ddd;
      font-size: 24rpx;
      color: #999;

      position: absolute;
      right: 10rpx;
      top: 91rpx;
    }

    [class*="icon-"]::before {
      display: block;
      font-size: 45rpx;
      margin-bottom: 10rpx;
    }
  }

  .detail image {
    width: 100%;
    height: 480rpx;
    margin-top: 20rpx;
  }

  .action {
    width: 100%;
    height: 98rpx;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    text {
      display: block;
    }

    .add,
    .buy {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 210rpx;
      text-align: center;
      font-size: 27rpx;
      color: #fff;
    }

    .add {
      background-color: #f4b73f;
    }

    .buy {
      background-color: #ea4451;
    }

    button {
      padding: 0;
      border-radius: 0;
      background-color: #fff;

      &::after {
        border: none;
      }
    }

    button,
    .cart {
      flex: 1;
      text-align: center;
      color: #989898;
      font-size: 24rpx;
      box-sizing: border-box;
    }

    [class*="icon"]::before {
      display: block;
      font-size: 45rpx;
      margin-bottom: 2rpx;
    }
  }
</style>
